<template>
  <div class="gl_contentBox gl_heightFull">
    <!-- 搜索 -->
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>课程名称</p>
          <el-input v-model="searchForm.CourseName" placeholder="请输入课程名称" size="mini" clearable @change="getData()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getData()">筛选</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 操作 -->
    <el-row type="flex" justify="space-between" class="gl_mb_15">
      <el-col :span="14">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="createClass()">排课</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportClass()">导出课表</el-button>
      </el-col>
    </el-row>
    <template>
      <Day
        v-if="typeTimeTable == 'day'"
        :type-time-table="typeTimeTable"
        :search-form="searchForm"
        @changeType="changeType"
        @getTime="getTime"
      />
      <Week
        v-if="typeTimeTable == 'week'"
        :type-time-table="typeTimeTable"
        :search-form="searchForm"
        @changeType="changeType"
        @getTime="getTime"
      />
      <Month
        v-if="typeTimeTable == 'month'"
        :type-time-table="typeTimeTable"
        :search-form="searchForm"
        @changeType="changeType"
        @getTime="getTime"
      />
    </template>
  </div>
</template>

<script>
import Day from './day';
import Week from './week';
import Month from './month';
import { mapState, mapActions } from 'vuex';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
export default {
  components: {
    Day,
    Week,
    Month
  },
  data() {
    return {
      loading: false,
      searchForm: {
        CourseName: '',
        ClassId: null,
        StartTime: null,
        EndTime: null
      },
      time: '',
      typeTimeTable: 'week' // 课表类型，日、周、月
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 排课
    createClass() {
      this.$router.push({
        name: 'CreateClass'
      });
    },
    // 切换日、周、月
    changeType(code) {
      this.typeTimeTable = code;
    },
    // 改变时间
    getTime(val) {
      this.time = val;
    },
    // 导出课表
    exportClass() {
      var that = this;
      that.downloadLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '课表' + '.xlsx';
      const form = JSON.parse(JSON.stringify(that.searchForm));
      form.ClassId = that.$route.params.classId || null;
      form.StartTime = that.time ? that.time.split('~')[0] : null;
      form.EndTime = that.time ? that.time.split('~')[1] : null;
      const GetCourseScheduleInput = JSON.stringify(form);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'CourseSchedule', GetCourseScheduleInput: GetCourseScheduleInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        that.downloadLoading = false;
      }).catch(error => {
        that.downloadLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }
};
</script>

<style scoped>
.change_icon {
  height: 28px;
  line-height: 32px;
}
.change_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_icon .icon_change:hover {
  color: #1890ff;
}
</style>
